<script setup lang="ts">
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {modifyAvatar} from "../../api/user";
import {normalizeDate} from "../../filters";
import bus from "../../bus";
import {ElFile} from "element-plus/es/components/upload/src/upload.type";

const API = ref<string>("http://sellServe.hxw.asia:5000")
let form: any = reactive({
  id: '',
  ctime: '',
  account: '',
  userGroup: '',
  imgUrl: ''
})

function getData() {
  let forms: any = window.sessionStorage.getItem("userInfo")
  form = JSON.parse(forms)
}

function handleAvatarSuccess(res: any, file: any) {
  let {code, msg, imgUrl} = res
  if (code == 0) {
    console.log('imgUrl', imgUrl)
    form.imgUrl = API + imgUrl
  }
}

function beforeAvatarUpload(file: ElFile) {
  const isJPG = /[jpeg|png]/.test(file.type)
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG 格式!');
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!');
  }
  return isJPG && isLt2M;
}

async function uploader() {
  let imgUrl = form.imgUrl.substr(form.imgUrl.lastIndexOf('/') + 1)
  let res = await modifyAvatar({imgUrl})
  let {code, msg} = res.data
  if (code == 0) {
    bus.$emit("update")
  }
}

getData()
</script>
<template>
  <el-card>
    <template #header>
      <div class="admininfo">
        <span>管理员信息</span>
      </div>
    </template>
    <div class="main">
      <div class="id">
        <span>管理员ID:{{ form.id }}</span>
      </div>
      <div class="account">
        <span>账号:{{ form.account }}</span>
      </div>
      <div class="userGroup">
        <span>用户组:{{ form.userGroup }}</span>
      </div>
      <div class="creationtime">
        <span>创建时间:{{ normalizeDate(form.ctime) }}</span>
      </div>
    </div>
    <div class="upload">
      <div>管理员头像:</div>
      <el-upload
          class="avatar-uploader"
          :action="API + '/users/avatar_upload'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
      >
        <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar"/>
        <el-icon v-else class="avatar-uploader-icon">
          <plus/>
        </el-icon>
      </el-upload>
    </div>
    <p>
      <el-button type="primary" size="mini" @click="uploader"
      >确定上传
      </el-button
      >
    </p>
  </el-card>
</template>
<style scoped lang="scss">
.main {
  .id,
  .account,
  .userGroup,
  .creationtime {
    line-height: 70px;
    border-bottom: 1px solid #eee;
  }
}

.upload {
  display: flex;
  align-items: center;
  height: 200px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
